<template>
    <div class="container">
        <div class="content-header">
            <div class="content-header-title">
                订阅
            </div>

            <div class="content-header-action" @click="createNewNote">
                <el-tooltip class="box-item" effect="dark" content="订阅" placement="bottom">
                    <div class="super-editor-button-box">
                        <MessageSquarePlus />
                    </div>
                </el-tooltip>
            </div>
        </div>

        <el-tabs v-model="activeTabName" class="demo-tabs" @tab-change="tabClick">
            <el-tab-pane label="消息" name="message">
                <div class="content-search">
                    <el-input v-model="searchMsgContent" placeholder="请输入要搜索的消息" clearable class="content-search-input"
                        @focus="focusMsgInput" @blur="blurMsgInput" @keyup.enter="searchMsg" />
                </div>
                <el-scrollbar class="dataset-list">
                    <div v-for="msg in msgList" class="dataset-list-item" @click="clickMsg(msg)" :class="getMsgItemClass(msg)">
                        <div class="dataset-name">{{ msg.title }}</div>
                        <div class="dataset-describe">{{ msg.content.substring(0, 50) }}</div>
                        <div class="dataset-info">
                            <div class="dataset-created">{{ msg.created }}</div>
                            <el-button type="primary" color="#222222" @click.stop="copyMsg(msg)">复制到笔记</el-button>
                        </div>
                    </div>
                </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="我的订阅" name="subscribe">
                <div class="content-search">
                    <el-input v-model="searchSubscribeContent" placeholder="请输入要搜索的数据集" clearable
                        class="content-search-input" @focus="focusSubscribeInput" @blur="blurSubscribeInput"
                        @keyup.enter="searchSubscribe" />
                </div>
                <el-scrollbar class="dataset-list">
                    <div v-for="sub in subscribeList" class="dataset-list-item" @click="clickSubscribe(sub)" :class="getSubscribeItemClass(sub)">
                        <!-- <div class="dataset-id">{{ dataset.id }}</div> -->
                        <div class="dataset-name">{{ sub.dataset.name }}</div>
                        <div class="dataset-describe">{{ sub.dataset.describe }}</div>
                        <div class="dataset-info">
                            <div class="dataset-created">{{ sub.created }}</div>
                        </div>
                    </div>
                </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="市场" name="market">
                <div class="content-search">
                    <el-input v-model="searchMarketKeywords" placeholder="请输入要搜索的数据集" clearable class="content-search-input"
                        @focus="focusMarketInput" @blur="blurMarketInput" @keyup.enter="searchMarket" />
                </div>
                <el-scrollbar class="dataset-list">
                    <div v-for="dataset in marketDatasetList" class="dataset-list-item"
                        @click="clickMarketDataset(dataset)" :class="getMarketDatasetItemClass(dataset)">
                        <!-- <div class="dataset-id">{{ dataset.id }}</div> -->
                        <div class="dataset-name">{{ dataset.name }}</div>
                        <div class="dataset-describe">{{ dataset.describe }}</div>
                        <div class="dataset-info">
                            <div class="dataset-created">{{ dataset.created }}</div>
                        </div>
                    </div>
                </el-scrollbar>
            </el-tab-pane>
        </el-tabs>


    </div>
</template>

<script setup>
import { ref, inject } from 'vue'
import { getDatasets, getDatasetItems, searchDatasetItems, getSubscribes, searchMySubscribe,searchMarketDataset } from '@/api/dataset'
import { copyPost } from '@/api/post'
import { MessageSquarePlus } from 'lucide-vue-next';
import { emitter } from '@/global.js'
import { ElMessage } from 'element-plus';

//消息
const msgList = ref([])
const initMsg = () => {
    getDatasetItems(1).then(result => {
        msgList.value = result
        clickMsg(msgList.value[0])
    })
}

const copyMsg = (msg) => {
    console.log('copyMsg', msg);
    copyPost(msg).then(result => {
        if (result.success) {
            ElMessage.success('复制成功')
        } else {
            ElMessage.error('复制失败')
        }
    })
}

const searchMsgContent = ref('')
const focusMsgInput = () => {
    msgList.value = []
}

const blurMsgInput = () => {
    if (searchMsgContent.value == '') {
        initMsg()
    }
}

const searchMsg = () => {
    console.log('searchMsg', searchMsgContent.value);
    searchDatasetItems(searchMsgContent.value).then(result => {
        msgList.value = result
    })
}



// 高亮正在阅读的内容
const activeMsgItem = ref('')
const getMsgItemClass = (item) => {
    if (activeMsgItem.value === item.id) {
        return 'dataset-list-item dataset-list-item-active'
    }
    return 'dataset-list-item'
}

const clickMsg = (msg) => {
    activeMsgItem.value = msg.id
    emitter.emit('clickMsg', msg)
}

initMsg()


// 订阅
const subscribeList = ref([])
const currentSubPage = ref(1)
const searchSubscribeContent = ref('')

const initSubscribe = () => {
    getSubscribes(currentSubPage.value).then(result => {
        // console.log(result);
        subscribeList.value = result
        clickSubscribe(subscribeList.value[0])
    })
}

// 高亮正在阅读的内容
const activeSubscribeItem = ref('')
const getSubscribeItemClass = (item) => {
    if (activeSubscribeItem.value === item.id) {
        return 'dataset-list-item dataset-list-item-active'
    }
    return 'dataset-list-item'
}

const clickSubscribe = (subscribe) => {
    activeSubscribeItem.value = subscribe.id
    emitter.emit('clickSubscribe', subscribe)
    userAction('dataset')
}

const focusSubscribeInput = () => {
    subscribeList.value = []
}

const blurSubscribeInput = () => {
    if (searchSubscribeContent.value == '') {
        initSubscribe()
    }
}

const searchSubscribe = () => {
    console.log('searchSubscribe', searchSubscribeContent.value);
    searchMySubscribe(searchSubscribeContent.value).then(result => {
        subscribeList.value = result
    })
}

emitter.on('cancelSubscribe', (subscribe) =>{
    initSubscribe()
})



//数据集市场
const marketDatasetList = ref([])
const searchMarketKeywords = ref('')
const initMarketDataset = () => {
    getDatasets().then((result) => {
        marketDatasetList.value = result
        userAction('dataset')
        clickMarketDataset(marketDatasetList.value[0])
    })
}

// 高亮正在阅读的内容
const activeMarketDatasetItem = ref('')
const getMarketDatasetItemClass = (item) => {
    if (activeMarketDatasetItem.value === item.id) {
        return 'dataset-list-item dataset-list-item-active'
    }
    return 'dataset-list-item'
}

const clickMarketDataset = (dataset) => {
    activeMarketDatasetItem.value = dataset.id
    userAction('dataset')
    emitter.emit('clickMarketDataset', dataset)
}

const focusMarketInput = () => {
    marketDatasetList.value = []
}

const blurMarketInput = () => {
    if (searchMarketKeywords.value == '') {
        initMarketDataset()
    }
}

const searchMarket = () => {
    searchMarketDataset(searchMarketKeywords.value).then(result => {
        console.log('searchMarket', result,'searchMarketKeywords',searchMarketKeywords.value);
        marketDatasetList.value = result
    })
}


//tab切换
const userAction = inject('userAction')
const activeTabName = ref('message')
const tabClick = (tabName) => {
    if (tabName == 'message') {
        searchSubscribeContent.value = ''
        userAction('item')
        clickMsg(msgList.value[0])
    } else if (tabName == 'subscribe') {
        initSubscribe()
        userAction('dataset')
    } else if (tabName == 'market') {
        initMarketDataset()
        userAction('dataset')
    }
}
</script>

<style scoped>
.container {
    border-right: 1px solid #e6e6e6;
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--supereditor-header-height);
    padding: 0 10px;
}

.content-header-title {
    width: 90%;
    font-size: large;
    font-weight: bold;
}

.content-header-add {
    display: inline-flex;
    align-items: center;
    line-height: 0px;
    text-align: center;
}

.content-header-action {
    height: 36px;
    width: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.content-header-action:hover {
    background: #ECEEF5;
    border-radius: 5px;
}


.content-channel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    height: 30px;
    /* gap: 10px; */
}


.content-channel>:nth-child(n) {
    width: 120px;
    height: 100%;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    /* border: 1px solid #B3D7FF; */
}

.content-channel-active {
    background: pink;
    border-radius: 4px;
}


.content-search {
    padding: 0 10px;
    height: 60px;
    width: 100%;
    line-height: 60px;
}

.content-search-input {
    width: 100%;
}



/* .msg-item-active {
    background: pink;
} */

.dataset-list {
    height: calc(100vh - var(--supereditor-header-height) - 100px);
    padding: 0 10px;
    list-style: none;
    /* border: 1px solid #ECEEF5; */
}

.dataset-list-item {
    /* border: 1px solid #ECEEF5; */
    padding: 10px 10px 5px 10px;
    margin-bottom: 5px;
    cursor: pointer;
    border-radius: 4px;
}

.dataset-list-item:hover {
    /* background-color: #B3D7FF; */
    background-color: var(--supereditor-hover-bg-color);
}


.dataset-list-item-active {
    background-color: #B3D7FF;
}


.dataset-name {
    font-size: 16px;
    font-weight: 500;
}

/* .dataset-describe {
    font-size: 14px;
    padding: 5px 0;
} */
.dataset-describe {
    font-size: 14px;
    color: #4D4D4D;
    padding: 10px 0px;
    word-break: break-all;
}

.dataset-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

::v-deep .el-tabs__nav-scroll {
    display: flex;
    justify-content: start;
    padding-left: 20px;
}

::v-deep .el-tabs__nav-wrap::after {
    background-color: white
}

::v-deep .el-tabs__nav {
    display: flex;
    justify-content: space-between;
    gap: 0 25px;
}

::v-deep .el-tabs__item {
    font-size: 16px;
    /* color: black; */
}
</style>